<script>
import MainHeader from "@/components/MainHeader.vue";
import axios from "axios";
import ObsClient from "esdk-obs-browserjs/src/obs.js";
import {v4 as uuidv4} from 'uuid'
export default {
  name: "page" ,
  components: {MainHeader},
  data(){
    return {
      isRegis: false,
      resUserName:"",
      resUserPassword:"",
      resUserNickname:"",
      resHead:"",
      loginUserName:"",
      loginPassword:"",
      selectedFile: null,
    }
  },
  methods:{
    handleFileSelect(event) {
      this.selectedFile = event.target.files[0];
    },
    change(){
      this.isRegis = !this.isRegis;
    },
    register(){
      if (!this.selectedFile){
        alert("没有上传头像")
      }
      const obsClient=new ObsClient({
                access_key_id: "EC6NJERUTMSFVKRZ1QSJ",
                secret_access_key_id: "G61l6MjbSE1IKRY7Hb6daQ4IaeZCJx4nq79ohmmd",
                server:"https://obs.cn-south-1.myhuaweicloud.com"
              });
      const uuid=uuidv4();
      obsClient.putObject({
        Bucket:"dmsgame",
        Key:`JavaEEObject/头像/${uuid+this.selectedFile.name}`,
        SourceFile:this.selectedFile,
      },(err,data)=>{
        console.log("出现错误:",err);
        if(!err){
          this.resHead=`https://dmsgame.obs.cn-south-1.myhuaweicloud.com/JavaEEObject/头像/${uuid+this.selectedFile.name}`;
          const registerData = {
            userName: this.resUserName,
            userPassword: this.resUserPassword,
            userNickName: this.resUserNickname,
            head_pic: this.resHead,
            //https://dmsgame.obs.cn-south-1.myhuaweicloud.com/JavaEEObject/%E5%A4%B4%E5%83%8F/QQ%E6%B5%8F%E8%A7%88%E5%99%A8%E6%88%AA%E5%9B%BE20230810151828.png
            //https://桶名.域名/文件夹目录层级/对象名
          }
          axios.post("http://113.44.66.99:8080/register",registerData).then(res=>{
            if(res.data.code==0){
              this.isRegis=!this.isRegis;
            }else {
              alert("注册失败！");
            }
          })
        }
      })

    },
    login(){
      const loginData = {
        userName: this.loginUserName,
        userPassword: this.loginPassword,
      }
      axios.post("http://113.44.66.99:8080/login", loginData).then(res=>{

        console.log(res.data.data)
        console.log(res.data)
        if(res.data.code == 0){
          this.$router.push("/");
        }
        localStorage.setItem("token",res.data.data);

      })

    },
    // getMessage(){
    //     const token = localStorage.getItem("token");
    //     console.log(token);
    //     axios.get("http://113.44.66.99:8080/getMessage",{
    //       headers:{
    //         Authorization: token
    //       }
    //     }).then(res=>{
    //       console.log(res.data)
    //     })
    //
    // },
    // commit(){
    //   if (!this.selectedFile) {
    //     console.log("请先选择要上传的文件");
    //     return;
    //   }
    //   const obsClient=new ObsClient({
    //     access_key_id: "EC6NJERUTMSFVKRZ1QSJ",
    //     secret_access_key_id: "G61l6MjbSE1IKRY7Hb6daQ4IaeZCJx4nq79ohmmd",
    //     server:"https://obs.cn-south-1.myhuaweicloud.com"
    //   });
    //   obsClient.putObject({
    //       Bucket:"dmsgame",
    //     Key:`JavaEEObject/头像/${this.selectedFile.name}`,
    //     SourceFile:this.selectedFile
    //   })
    //
    //
    // }
  },
  mounted() {
    console.log("您位于login界面")
    const token = localStorage.getItem("token");

  }
}
</script>

<template>
  <div class="w-full h-screen flex flex-col items-center">
    <MainHeader></MainHeader>
    <div class=" w-1/2 h-2/3 mt-20 flex flex-col items-center justify-center" v-if="!isRegis">
      <div class="text-white text-4xl mb-20 animate__animated animate__swing animate__infinite">注册你的小站账号</div>
        <el-form class="  w-4/5 pb-4">
          <el-form-item label="用户名">
            <el-input v-model="resUserName" ></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input  v-model="resUserPassword" ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="resUserNickname"></el-input>
          </el-form-item>
          <el-form-item>
            <input type="file" @change="handleFileSelect">
          </el-form-item>

          <el-form-item>
            <el-button type="primary" plain @click="register">注册</el-button>
            <el-button type="primary" plain @click="change">点击去登陆</el-button>

          </el-form-item>
        </el-form>
    </div>
    <div class=" w-1/2 h-2/3 mt-20 flex flex-col items-center justify-center" v-if="isRegis">
      <div class="text-white text-4xl mb-20 animate__animated animate__swing animate__infinite">登陆你的小站账号</div>
      <el-form class="   w-96">
        <el-form-item label="用户名">
          <el-input v-model="loginUserName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginPassword"></el-input>
        </el-form-item>

        <el-form-item>
          <div class="flex justify-between">
          <el-button type="primary" plain @click="login" class="mr-40">登陆</el-button>
          <el-button type="primary" plain @click="change">点击去注册</el-button>
         </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
